<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="mini"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="" prop="approvalIsPass">
        <!-- <el-select
          v-model="queryParams.approvalIsPass"
          placeholder="商机状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select> -->

        <el-button
          :type="
            item.value == queryParams.approvalIsPass ? 'primary' : 'default'
          "
          size="mini"
          @click="handlePassQuery(item.value)"
          v-for="item in statusOptions"
          :key="item.value"
          >{{ item.label }}</el-button
        >
      </el-form-item>

      <el-form-item label="商机编码" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入商机编码"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="businessList">
      <el-table-column label="商机编码" prop="code" width="120" />
      <el-table-column label="客户名称" prop="custormer" width="120" />

      <el-table-column label="项目名称" prop="projectName" width="180" />
      <el-table-column
        label="商机来源"
        prop="source"
        :show-overflow-tooltip="true"
        width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.source | sourceFilter }}
        </template>
      </el-table-column>

      <el-table-column
        label="商机阶段"
        prop="stage"
        :show-overflow-tooltip="true"
        width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.stage | stageFilter }}
        </template>
      </el-table-column>

      <el-table-column
        label="项目预算"
        prop="budgetFund"
        :show-overflow-tooltip="true"
        width="130"
      >
        <template slot-scope="scope">
          {{ scope.row.budgetFund | budgetFundFilter }}
        </template>
      </el-table-column>

      <el-table-column
        label="竞争态势"
        prop="swot"
        :show-overflow-tooltip="true"
        width="130"
      >
        <template slot-scope="scope">
          {{ scope.row.swot | swotFilter }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button size="mini" type="text" @click="handleView(scope.row)">
            查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            v-if="permission.edit"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleApprove(scope.row)"
            :disabled="!!scope.row.projectStage"
          >
            审核
          </el-button>
          <!-- <el-button
            size="mini"
            type="text"
            @click="handleApprove(scope.row)"
            :disabled="scope.row.projectStage"
          >
            驳回
          </el-button> -->
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.projectStage != 1"
            @click="handleAssign(scope.row)"
          >
            分配
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="permission.delete"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
          <el-dropdown
            size="mini"
            @command="(command) => handleCommand(command, scope.row)"
          >
            <el-button size="mini" type="text">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>转移</el-dropdown-item>
              <el-dropdown-item>转派</el-dropdown-item>
              <el-dropdown-item>延时</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <ApproveDialog ref="approveDialog" @success="handleQuery" />
    <AssignDialog ref="assignDialog" @success="handleQuery" />
  </div>
</template>

<script>
import { getBusinessList, deleteBusiness } from "@/api/business/index";

import {
  budgetFundOptions,
  sourceOptions,
  stageOptions,
  swotOptions,
} from "@/constant/index";
import { mapGetters } from "vuex";

import ApproveDialog from "./ApproveDialog.vue";
import AssignDialog from "./AssignDialog.vue";

export default {
  name: "Role",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        approvalIsPass: undefined,
        code: undefined,
      },
      // 数据列表
      businessList: [{}],
      statusOptions: [
        {
          label: "未审批",
          value: 0,
        },
        {
          label: "审批通过",
          value: 1,
        },
        {
          label: "审批驳回",
          value: 2,
        },
      ],
    };
  },
  components: {
    ApproveDialog,
    AssignDialog,
  },
  computed: {
    ...mapGetters(["permissions"]),
    permission() {
      return {
        delete: (this.permissions || []).includes("system:opportunity:remove"),
        edit: (this.permissions || []).includes("system:opportunity:edit"),
      };
    },
  },
  created() {
    this.getList();
  },
  filters: {
    budgetFundFilter(value) {
      if (!value) return "";
      return budgetFundOptions.find((item) => item.value == value).label;
    },
    sourceFilter(value) {
      if (!value) return "";
      return sourceOptions.find((item) => item.value == value).label;
    },
    stageFilter(value) {
      if (!value) return "";
      return stageOptions.find((item) => item.value == value).label;
    },
    swotFilter(value) {
      if (!value) return "";
      return swotOptions.find((item) => item.value == value).label;
    },
  },
  methods: {
    getList() {
      this.loading = true;
      getBusinessList(this.queryParams).then((response) => {
        this.businessList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    handleView(row) {
      this.$router.push(`/business/detail/index?id=${row.id}`);
    },
    handleEdit(row) {
      this.$router.push(`/business/edit/index?id=${row.id}`);
    },
    handleApprove(row) {
      this.$refs.approveDialog.showDialog(row);
    },
    handleDelete(row) {
      this.$confirm("确定删除商机吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteBusiness(row.id)
            .then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.handleQuery();
            })
            .catch(() => {
              this.$message.error("操作失败");
            });
        })
        .catch(() => {});
    },
    handleAssign(row) {
      // assignBusiness()
      this.$refs.assignDialog.showDialog(row);
    },
    handlePassQuery(approvalIsPass) {
      this.$set(this.queryParams, "approvalIsPass", approvalIsPass);
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
